<template>
	<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
	<ScaleScreen :height="1080" :selfAdaption="$store.state.setting.isScale" :width="1920" class="scale-wrap">
		<div class="background">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<!-- 头部 -->
				<div class="d-flex jc-center title_wrap">
					<div class="bar_left"></div>
					<div class="bar_right"></div>
					<!-- <div class="top_light"></div> -->
					<div class="d-flex jc-center">
						<div class="title">
							<span class="title-text">大学迎新数据可视化平台</span>
						</div>
					</div>
					<!-- 左侧设置按钮和时间 -->
					<div class="timers">
						<!-- <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i> -->
						{{ dateYear }} {{ dateWeek }} {{ dateDay }}
					</div>
					<!-- 右侧用户信息相关元素 -->
					<div class="userArea">
						<div v-if="this.$store.state.user.userState && !managementActive" class="dataManagement"
							@click="routeToManagement">
							<i class='el-icon-menu' style="color: #005b30;font-size: 24px; margin-right: 10px"></i>
							<span>数据管理</span>
						</div>
						<div v-else-if="this.$store.state.user.userState" class="dataBoard" @click="routeToDataBoard">
							<i class='el-icon-s-data' style="color: #005b30;font-size: 24px; margin-right: 10px"></i>
							<span>数据看板</span>
						</div>
						<el-dropdown :disabled="!this.$store.state.user.userState" size="medium"
							@command="showEditUserDialog">
							<div class="el-dropdown-link userInfo">
								<i class='el-icon-user-solid'
									style="color: #005b30;font-size: 24px; margin-right: 10px"></i>
								<span style="font-size: 18px; color: #005b30">{{ this.$store.state.user.userName
									}}</span>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>编辑</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<div v-if="this.$store.state.user.userState" class="userOperation" style="margin-left: 24px"
							@click="logout">
							<i class="blq-icon-logout" style="font-size: 24px; margin-right: 10px"></i>
							<span>退出</span>
						</div>
						<div v-else class="userOperation" @click="showLoginDialog">
							<i class="blq-icon-login" style="font-size: 24px; margin-right: 10px"></i>
							<span>登录</span>
						</div>
					</div>
				</div>
				<!-- 头部 -->
				<!-- 内容 -->
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
				<!-- 内容 -->
			</div>
		</div>
		<Setting ref="setting" />
		<!-- 登录弹窗 -->
		<LoginForm ref="loginForm" @success-login="queryCurrentUser" />
		<!-- 修改用户弹窗 -->
		<UserEditForm ref="userEditForm" @success-update="queryCurrentUser" />
	</ScaleScreen>
	<!-- </div> -->
</template>

<script>
import { formatTime } from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import LoginForm from "@/components/login-form/login-form.vue";
import UserEditForm from "@/components/user/user-edit.vue";
import { clearLoginInfo } from "@/lib/currency";

export default {
	components: { Setting, ScaleScreen, LoginForm, UserEditForm },
	data() {
		return {
			timing: null,
			loading: true,
			dateDay: null,
			dateYear: null,
			dateWeek: null,
			weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
			managementActive: false,
		};
	},
	filters: {
		numsFilter(msg) {
			return msg || 0;
		},
	},
	computed: {
		show() {
			return show
		}
	},
	created() {
	},
	mounted() {
		this.timeFn();
		this.cancelLoading();
	},
	beforeDestroy() {
		clearInterval(this.timing);
	},
	methods: {
		routeToManagement() {
			this.$router.push({ path: "/management" });
			this.managementActive = true;
		},
		routeToDataBoard() {
			this.$router.push({ path: "/index" });
			this.managementActive = false;
		},
		clearLoginInfo,
		showLoginDialog() {
			this.$refs.loginForm.showLoginForm();
		},
		showEditUserDialog() {
			this.$refs.userEditForm.showEditUserForm({
				id: this.$store.state.user.id,
				userName: this.$store.state.user.userName,
				role: this.$store.state.user.role
			});
		},
		showSetting() {
			this.$refs.setting.init();
		},
		timeFn() {
			this.timing = setInterval(() => {
				this.dateDay = formatTime(new Date(), "HH: mm: ss");
				this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
				this.dateWeek = this.weekday[new Date().getDay()];
			}, 1000);
		},
		cancelLoading() {
			let timer = setTimeout(() => {
				this.loading = false;
				clearTimeout(timer);
			}, 500);
		},
		queryCurrentUser() {
			this.$axios.get("/api/user/current").then((res) => {
				if (res.code === 0) {
					this.$store.commit("user/update", {
						id: res.data.id,
						userName: res.data.userName,
						userState: true,
						role: res.data.role
					});
				} else {
					this.reset();
				}
			}).catch(() => {
				this.$message.error("无法连接到服务器");
				this.reset();
			});
		},
		logout() {
			clearLoginInfo();
			this.$confirm('是否确认退出登录?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'info'
			}).then(() => {
				this.$axios.post("/api/user/logout").then((res) => {
					if (res.code === 0) {
						this.reset();
						this.$message.success("退出登录成功");
					} else {
						this.$message.error(res.message);
					}
				}).then(() => {
					this.queryCurrentUser();
				}).catch(() => {
					this.$message.error("退出登录失败，与服务器断开连接");
					this.reset();
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '取消退出'
				});
			});
		},
		reset() {
			this.$store.commit("user/reset");
			this.$router.push({ path: "/index" });
			this.managementActive = false;
		},
	},
};
</script>

<style lang="scss">
@import "./home";
</style>
